<template>
  <!-- 图标选择组件 -->
  <fks-dialog
    :visible.sync="selectVisiable"
    :append-to-body="true"
    width="960px"
    :title="LANG.ICON"
    @close="cancel"
  >
    <div class="svg-container">
      <div
        v-loading="loading"
        class="svg-list"
      >
        <div
          v-for="(item, index) in list"
          :key="index"
          class="svg-item"
          :style="index == isActive ? 'background-color: #EEE;' : ''"
          @click="checkItem(index, item)"
        >
          <fks-icon
            :icon-class="item.code"
            class="svg"
          />
        </div>
      </div>
    </div>
    <template
      slot="footer"
      style="text-align: right"
    >
      <fks-button
        type="primary"
        @click="save"
      >
        {{ LANG.SAVE }}
      </fks-button>
    </template>
  </fks-dialog>
</template>

<script>
export default {
  name: 'SvgConfig',
  props: {
    iconSelShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      pageSize: 45,
      currentPage: 1,
      total: 0,
      param: '',
      node: {},
      category: '',
      isActive: 0.1,
      selectItem: {},
      tabPosition: '',
      loading: false,
      selectVisiable: this.iconSelShow
    }
  },
  watch: {
    iconSelShow() {
      this.selectVisiable = this.iconSelShow
    }
  },
  mounted() {
    this.getSvgs()
  },
  methods: {
    //确认选中
    checkItem(index, item) {
      this.isActive = index
      this.selectItem = Object.assign(item, {})
    },
    getSvgs() {
      //生成一个上下文模块,包含目录下所有模块的引用(参数：查询的目录，是否查询子孙目录，文件后缀)
      const req = require.context('@/assets/svg/menu', true, /\.svg$/)
      const requireAll = (requireContext) =>
        requireContext.keys().map((key) => {
          return {
            code: key.replace(/(.*\/)*([^.]+).*/gi, '$2')
          }
        })
      //获取SVG图标数组
      this.list = requireAll(req)
    },
    //点击关闭 和 取消 都是关闭组件
    cancel() {
      this.isActive = 0.1
      this.$emit('closeSelect', false)
    },
    //确认 保存所选图标
    save() {
      //判断是否选择了图标，没选择时，isActive=0.1 为初始值
      if (this.isActive != 0.1) {
        this.$emit('saveSelect', this.selectItem)
        this.cancel()
      } else {
        this.$message.warning('至少选择一个图标')
      }
    },
    sizeChange() {
      this.isActive = 0.1
      this.getSvgs()
    },
    currentChange() {
      this.isActive = 0.1
      this.getSvgs()
    },
    prevClick() {
      this.isActive = 0.1
      this.getSvgs()
    },
    nextClick() {
      this.isActive = 0.1
      this.getSvgs()
    },
    handleClick(val) {
      this.category = val
      this.getSvgs()
      //切换tab时 重置选中图标
      this.isActive = 0.1
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .fks-dialog__body {
  padding-top: 0;
}

.svg-container {
  height: 100%;
  padding: 0 20px;

  .radio-group {
    float: right;
    padding: 20px 0 10px;
  }
}

.svg-list {
  width: 105%;
  height: calc(100% - 100px);
  margin: 0 auto;
  overflow: auto;
  font-size: 0;

  .svg-item {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 55px;
    margin: 11px;
    border: 1px solid #f1f1f1;
    text-align: center;
    vertical-align: center;
    cursor: pointer;

    &:hover {
      background-color: #eee;
    }

    .svg {
      display: inline-block;
      width: 36px;
      height: 36px;
      margin-top: 8px;
      overflow: hidden;
      font-size: 25px;
      color: #000;

      ::v-deep svg {
        width: 100%;
        height: auto;
        overflow: hidden;
        fill: currentColor;
      }
    }

    .svg-title {
      margin-top: 10px;
      font-size: 14px;
    }
  }
}
</style>
